<!DOCTYPE html>
<html dir="ltr" lang="zh_cn" ><!--<![endif]--><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>搜索</title>


    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.js"></script>
    <!--<script src="https://hm.baidu.com/hm.js?752079c169218184ec5f539120602ec2"></script><script src="https://mall.opencart.cn/catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>-->
    <!--<script src="https://mall.opencart.cn/catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>-->
    <!--<script src="https://mall.opencart.cn/catalog/view/javascript/layer/layer.js" type="text/javascript"></script>-->
    <link rel="stylesheet" href="./css/layer.css?v=3.1.1" id="layuicss-layer">
    <!--<script src="https://mall.opencart.cn/catalog/view/theme/mobile/javascript/jquery.unveil.js" type="text/javascript"></script>-->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!--<script src="https://mall.opencart.cn/catalog/view/theme/mobile/javascript/common.js" type="text/javascript"></script>-->
    <link href="./css/stylesheet.css" rel="stylesheet">


</head>
<body  class="product-search" >
<div id="app">
    <a href="#page-top" class="go-top"><i class="iconfont"></i></a>

    <div id="product-search " class="container" >
        <div class="row">
            <div id="content" class="col-sm-12">
                <div class="nav-bar">搜索</div>
                <div class="row widget">
                    <div class="col-xs-12">
                        <div id="search" class="input-group">
                            <input v-model='search_key' type="text" name="search" placeholder="关键字" id="input-search" class="form-control">
                            <input type="hidden" name="category_id" value="0">
                            <input type="hidden" name="sub_category" value="1">
                            <input type="hidden" name="description" value="1">
                            <span class="input-group-btn">
              <input type="button" value="搜索" id="button-search" class="btn btn-primary">
            </span>
                        </div>
                    </div>
                </div>

                <div class="row widget category-sort-widget">
                    <div class="col-sm-12">
                        <ul>
                            <li>
                                <a class="active" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=p.sort_order&amp;order=ASC&amp;search=s">
                                    默认 <i class="fa fa-level-down"></i>
                                </a>
                            </li>
                            <li>
                                <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=pd.name&amp;order=ASC&amp;search=s">
                                    名称 <i class="fa fa-sort"></i>
                                </a>
                            </li>
                            <li>
                                <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=p.price&amp;order=ASC&amp;search=s">
                                    价格 <i class="fa fa-sort"></i>
                                </a>
                            </li>
                            <li>
                                <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=rating&amp;order=DESC&amp;search=s">
                                    评级 <i class="fa fa-sort"></i>
                                </a>
                            </li>
                            <li>
                                <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=p.model&amp;order=ASC&amp;search=s">
                                    型号 <i class="fa fa-sort"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div  class="row product-list-item-style product-grid-box">
                    <div v-for='item in goods_list' class="col-xs-6 product-item">
                        <div class="product-item-wrapper">
                            <div class="image">
                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=33&amp;search=s">
                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-14-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-14-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                </a>
                                <!--<span class="sales">销量： 100,039</span>-->

                            </div>
                            <div class="info">
                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=33&amp;search=s">
                                    {{item.name}}
                                </a>
                                <div class="price">
                                    <span class="price-new">￥{{item.price}}</span>
                                    <!--<span class="price-old">￥788.00</span>-->
                                </div>

                                <div class="add-cart" v-on:click="cart_add(item)">
                                    <i class="iconfont"></i>
                                </div>

                            </div>
                        </div>

                    </div>
                    <!--
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=55&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                </a>
                                                <span class="sales">销量： 126</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=55&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                <div class="price">
                                                    <span class="price-new">￥299.00</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('55')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=57&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-g-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-g-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                </a>
                                                <span class="sales">销量： 126</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=57&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                <div class="price">
                                                    <span class="price-new">￥399.00</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('57')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=58&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-12-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-12-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                </a>
                                                <span class="sales">销量： 126</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=58&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                <div class="price">
                                                    <span class="price-new">￥499.00</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('58')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=59&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-b-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-b-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                </a>
                                                <span class="sales">销量： 127</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=59&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                <div class="price">
                                                    <span class="price-new">￥599.00</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('59')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=60&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-g-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-g-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                </a>
                                                <span class="sales">销量： 127</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=60&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                <div class="price">
                                                    <span class="price-new">￥699.00</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('60')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=61&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-1-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                </a>
                                                <span class="sales">销量： 133</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=61&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                <div class="price">
                                                    <span class="price-new">￥0.01</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('61')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=29&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-2-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                </a>
                                                <span class="sales">销量： 1,045</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=29&amp;search=s">Sony/索尼 MDR-XB80BS 立体声通话式无线耳机运动</a>
                                                <div class="price">
                                                    <span class="price-new">￥599.99</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('29')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/product-43-cn?search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-r-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                </a>
                                                <span class="sales">销量： 141</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/product-43-cn?search=s">Sony/索尼 SRS-XB10 无线蓝牙音箱重低音小钢炮迷你户外小音响</a>
                                                <div class="price">
                                                    <span class="price-new">￥299.00</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('43')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=34&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-15-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                </a>
                                                <span class="sales">销量： 7,465</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=34&amp;search=s">Sony/索尼 WH-H900N头戴式无线蓝牙降噪耳机</a>
                                                <div class="price">
                                                    <span class="price-new">￥199.00</span> <span class="price-old">￥2,299.00</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('34')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=41&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-15-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                </a>
                                                <span class="sales">销量： 3,651</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=41&amp;search=s">Sony/索尼 WI-H700入耳式无线蓝牙耳机无线通话</a>
                                                <div class="price">
                                                    <span class="price-new">￥899.00</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('41')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-6 product-item">
                                        <div class="product-item-wrapper">
                                            <div class="image">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=35&amp;search=s">
                                                    <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-13-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                </a>
                                                <span class="sales">销量： 2,190</span>

                                            </div>
                                            <div class="info">
                                                <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=35&amp;search=s">小米米家空气净化器2S家用室内办公智能氧吧除甲醛雾霾粉尘</a>
                                                <div class="price">
                                                    <span class="price-new">￥899.00</span>
                                                </div>

                                                <div class="add-cart" onclick="cart.add('35')"><i class="iconfont"></i></div>

                                            </div>
                                        </div>

                                    </div>
                                    -->
                </div>



            </div>
        </div>
    </div>

    <footer>
        <div class="language-currency-wrapper mb-1 mt-1">
            <a href="#" id="switch-language">
                <!--<img src="catalog/language/zh-cn/zh-cn.png" alt="简体中文" title="简体中文">-->
                简体中文
            </a>


            <a href="#" id="switch-currency">
                ￥  人民币
            </a>


        </div>
        <div class="container">
            <div class="footer-powered">
                技术支持 <a href="http://www.opencart.cn">opencart.cn</a> OpenCart 3.0 中文专业版 - PHP 开源电商系统 © 2018
            </div>
        </div>
    </footer>
    <footer-nav></footer-nav>


    <div v-show='tips.show' class="layui-layer layui-layer-dialog layui-layer-border
    layui-layer-msg layui-layer-hui"
         id="layui-layer10" type="dialog"
         times="10" showtime="3000" contype="string"
         style="z-index: 19891024; top: 296px; left: 92px;">
        <div id="" class="layui-layer-content">{{tips.message}}</div>
        <span class="layui-layer-setwin"></span>
    </div>

</div>

<script>
    $.get('/frontend/widgets/footer-nav.html',{},function( res ){
        $('body').append( res );
    });
</script>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            search_key:'',
            goods_list:[],
            tips:{ //提示框
                show:0,
                message:''
            },
        },
        methods:{

            header2_event:function( data ){

                console.log( 'header2_event:' );
                console.log( data );
            },

            get_header:function(){

                var url = 'http://shop.cloud.com/frontend/widgets/header.html';
                axios.get( url ).then(function( res ){

                });
            },
            get_list:function(){

                var t = this;
                var url = '/?r=goods';
                axios.get( url )
                    .then(function (res) {
                        t.goods_list = res.data.rows;
                        console.log( t.goods_list );
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            cart_add:function( product ){

                //todo 添加到购物车
                var t = this;
                var url = '/?r=cart/add';
                url += '&product_id='+product.id+'&number=1';
                axios.get( url )
                    .then(function (res) {

                        if( res.data.description ){
                            //todo 显示 购物车添加提示
                            t.tips.message = res.data.description;
                            t.tips.show = 1;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }

        },

        watch:{
            'tips.show':function(){
                console.log('tips show');
                //todo: 提示框定位: 获取屏幕宽度，获取自身宽度， 算出left

                // todo:提示框缓缓消失

            }
        },
        created:function(){

            this.get_list();

        },

        components:{
            // 'header':import('/frontend/widgets/header.html')
        }

    });


</script>

</body></html>